<%--
  Created by IntelliJ IDEA.
  User: zzf
  Date: 2021/1/7
  Time: 19:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/public/header/permissionCommon.jspf" %>

<html>
<head>
    <title>系统日志</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- 头部和左侧导航-->
    <div id="header"></div>

    <!--右侧主体区域-->
    <div class="layui-body" >
        <!-- 右信息显示 -->
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">系统日志</li>
                    </ul>

                    <div class="layui-tab-content">
                        <div id="sysInfo" class="layui-tab-item layui-show">
                            <form id="userSearch" class="layui-form layui-form-pane" method="post"
                                  style="margin-top: 20px;">
                                <div class="layui-form-item" style="width:100%">
                                    <label class="layui-form-label" style="width:8%">用户名</label>
                                    <div class="layui-input-inline" style="width: 10%">
                                        <input id="user_id" name="user_id" autocomplete="off" class="layui-input"
                                               type="text"/>
                                    </div>
                                    <label class="layui-form-label" style="width: 10%">日志类型</label>
                                    <div class="layui-input-inline" style="width: 15%">
                                        <select name="operTypeID" id="operTypeID" lay-filter="operTypeID"  class="select">
                                            <option value="">请选择日志类型</option>
                                        </select>
                                    </div>
                                    <label class="layui-form-label" style="width: 5%">时间</label>
                                    <div class="layui-input-inline" style="width: 12%">
                                        <input name="timeStart" id="timeStart" placeholder="开始时间"
                                               autocomplete="off" class="layui-input" type="text"/>
                                    </div>
                                    <div class="layui-form-mid">-</div>
                                    <div class="layui-input-inline" style="width: 12%">
                                        <input name="timeEnd" id="timeEnd" placeholder="结束时间"
                                               autocomplete="off" class="layui-input" type="text"/>
                                    </div>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                        <button class="layui-btn" lay-submit lay-filter="searchSubmit" style="width: auto">
                                                    <i class="layui-icon">&#xe615;</i>查询
                                        </button>
                                </div>
                            </form>
                            <table id="logtable" lay-filter="logtable"></table>
                        </div>
                    </div>
                </div>
            <%--</div>--%>
    </div>


    <!--底部-->
    <div id="footer"></div>
    <%--<script src="${webPath}/js/permission/auth/permList.js"></script>--%>
    <script>
        $("#header").load("${webPath}/publicPages/permission/fragments/header.jsp");
        $("#footer").load("${webPath}/publicPages/permission/fragments/footer.jsp");
    </script>

</div>
<script>
    //Demo
    layui.use(['form',"table","laydate"], function(){
        var form = layui.form,
            table =layui.table,
            laydate =layui.laydate;
            table.render({
            elem: '#logtable'//指定原始表格元素选择器（推荐id选择器）
            ,url: '/sysInfo/getAllLogList'
           ,parseData: function(res) { //res 即为原始返回的数据
                   return {
                       "code":0,
                       "msg":'',
                       "count": res.total,
                       "data": res.list
                   };
               }
            ,method: 'post'
            ,id:'logtable'
            ,height: 315 //容器高度
               ,page: {
                   layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                   , groups: 1 //只显示 1 个连续页码
                   , first: false //不显示首页
                   , last: false //不显示尾页
               }
               , request: {pageName: 'page' //页码的参数名称，默认：page
                          ,limitName: 'limit' //每页数据量的参数名，默认：limit
                    }
            ,cols: [[ //表头
                // {field: 'id', title: 'ID', width:100, sort: true, fixed: 'left'}
                {field: 'user_id', title: '用户名', width:125}
                ,{field: 'operator', title: '操作者', width:215}
                ,{field: 'operType', title: '操作类型', width: 175}
                ,{field: 'operResult', title: '操作结果', width: 165}
                ,{field: 'operTime',title: '操作时间',width: 280,sort: true,
                       templet: function (s) {
                        return layui.util.toDateString(s.operTime);

                       }
                }
            ]] //设置表头
        });
        $.ajax({
            url: "/sysInfo/getAllLogType",
            type: "POST",
            success: function (data) {
                console.log("yyyy", data);
                if(data.code ==0){
                    $.each(data.data,function(index,item){
                        $('#operTypeID').append(new Option(item.typeContext));//往下拉菜单里添加元素}
                    })
                }

                form.render();//菜单渲染 把内容加载进去

            }

        });


        form.on('submit(searchSubmit)', function(data){

            data.field.page= 1;
            data.field.limit = 10;
            console.log('hello',data.field);
            $.ajax({
                url:"/sysInfo/findByOperator",
                data:data.field,
                request: {
                     pageName: 'page' //页码的参数名称，默认：page
                    ,limitName: 'limit' //每页数据量的参数名，默认：limit
                },
                type:"POST",
                success:function(data){
                    table.reload('logtable',{
                        url:"",
                        data:data,
                        done: function(){
                            console.log("完成")
                        }
                    })
                },//ajax的使用，点击submit即可跳转到controller处寻找url完成功能

            });
            return false;
        });
        // 日期
        laydate.render({
            elem: '#timeStart',
        });
        laydate.render({
            elem: '#timeEnd',
        });

    })
</script>

</body>
</html>
